/* eslint-disable react-refresh/only-export-components */
import React from 'react';

// 1. tsx 元素
const base1 = (
  <>
    <h1>Hello, world!</h1>
  </>
);

// 2. 表达式
const name2 = 'React';
const base2 = (
  <>
    <h1>hello {name2}</h1>
  </>
);
// 3. 属性
const name3 = '';
const base3 = (
  <>
    <h2 title={name3}></h2>
  </>
);
// 4. 子元素
const base4 = (
  <>
    <div>
      <h1>Hello, world!</h1>
    </div>
    <div>你好</div>
  </>
);

// 5. 条件渲染
const isLoggedIn = true;
const base5 = <>{isLoggedIn ? <h1>欢迎回来!</h1> : <h1>请登录</h1>}</>;

// 6. 列表渲染
const items = ['苹果', '香蕉', '橘子'];
const base6 = (
  <>
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  </>
);

// 7. tsx 转换
const base7 = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, world!')
);
// 8. 注意事项
// tsx 语法必须返回一个单一的根元素
//  <></> 包裹多个元素
// for 属性使用 htmlFor
// key 属性用于列表渲染中的唯一标识
// class 属性使用 className

// 9. 自定义组件
const Welcome = (props: { name: string }) => (
  <>
    <h1>hellworld {props.name}</h1>
  </>
);
const base9 = (
  <>
    <Welcome name="你想干什么"></Welcome>
  </>
);
// 10. 事件处理
const base10 = (
  <>
    <button onClick={() => alert('Hello, world!')}>点击我</button>
  </>
);
// 11. 样式与类名
const base11 = (
  <>
    <h1 style={{ color: 'blue', fontSize: '24px' }} className="title">
      Hello, world!
    </h1>
  </>
);
// 12. 注释
const base12 = (
  <>
    {/* 这是一个注释 */}
    <h1>Hello, world!</h1>
  </>
);

// 导出所有变量以避免未使用警告
export {
  base1,
  base2,
  base3,
  base4,
  base5,
  base6,
  base7,
  base9,
  base10,
  base11,
  base12,
  name2,
  name3,
  isLoggedIn,
  items,
  Welcome,
};
